"use client"

import { useEffect, useRef } from "react"
import { navConfig } from "@/lib/navConfig"
import { cn } from "@/lib/utils"
import { useSectionStore } from "@/store/section"
import gsap from "gsap"
import Link from "next/link"
import ResumeBtn from "../ResumeBtn"
import ThemeSwitch from "../ThemeSwitch"
import MobileNav from "./MobileNav"

export default function Header() {
  const headerRef = useRef(null)

  useEffect(() => {
    gsap.fromTo(
      headerRef.current,
      { top: -120 },
      { top: 0, duration: 0.7, delay: 2.2, ease: "Power0.easeNone" }
    )
  }, [])

  const { section } = useSectionStore()

  return (
    <header
      ref={headerRef}
      className="fixed z-[100] top-0 left-0 right-0 bg-white/90 dark:bg-black/90 backdrop-blur-[6px] border-b-2 border-black dark:border-white"
    >
      <div className="w-full h-auto min-h-[4.5rem] flex items-center px-4 sm:px-[5%]">
        <div className="w-full grid items-center grid-cols-8 md:grid-cols-12">
          <div className="col-span-3 md:col-span-4">
            <Link href="/" className="text-lg sm:text-xl font-black" data-cursor-text="goto">
              <span className="text-black dark:text-white">
                蜜多云
              </span>
              <span className="text-tech-blue">科技</span>
            </Link>
          </div>
          <div className="col-span-4 hidden md:block m-auto">
            <div className="flex gap-[2rem] lg:gap-[3rem] items-center">
              {navConfig.map((link) => (
                <Link
                  data-active={link.href === section}
                  key={link.id}
                  href={link.href}
                  className="navlink font-medium text-sm lg:text-base"
                  data-cursor-text="goto"
                >
                  {link.title}
                </Link>
              ))}
            </div>
          </div>
          <div className="col-span-5 md:col-span-4 flex items-center justify-end gap-2 sm:gap-4 md:gap-6 lg:gap-10">
            <button 
              className="neo-brutal-btn text-xs sm:text-sm md:text-base px-2 sm:px-3 md:px-4 py-2 hidden sm:block"
              data-cursor-text="initiate"
            >
              <span className="hidden lg:inline">预约演示</span>
              <span className="lg:hidden">演示</span>
            </button>
            <button 
              className="neo-brutal-btn text-xs px-2 py-1.5 sm:hidden"
              data-cursor-text="initiate"
            >
              演示
            </button>
            <div className="scale-75 sm:scale-100">
              <ThemeSwitch />
            </div>
            <MobileNav />
          </div>
        </div>
      </div>
    </header>
  )
}
